<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>四角边框随鼠标移动</title>
  <style>
    * { margin: 0; padding: 0;}
    body {
      background: #333;
      padding: 50px 30px;
    }
    .container {
      position: relative;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      /* display: grid; */
      /* grid-template-columns: 32% 32% 32%; */ /* 列宽*/
      /* row-gap: 4%; */ /* 行间隔*/
      /* column-gap: 2%; */ /* 列间隔*/
    }
    .item {
      width: 32%;
      margin-bottom: 30px;
    }
    .item img{
      display: block;
      width: 100%;
      object-fit: cover;
    }
    section {
      padding: 10px 25px;
      background-color: #fff;
    }
  </style>
  <style>
    .container {
      position: relative;
    }
    .pointer {
      position: absolute;
      display: none;
      --l: 15px;  /* 设置变量，长度*/
      --g: 10px;  /* 设置变量，间隙*/
      --t: 2px; /* 设置变量，线条粗细*/
      --s: 200px; /* 宽度，框住的元素大小*/
      --h: 200px; /* 高度，框住的元素大小*/
      --x: 0; /* 坐标x */
      --y: 0; /* 坐标y */
      width: calc(var(--s) + var(--g) * 2);
      height: calc(var(--h) + var(--g) * 2);
      border: var(--t) solid #fff; /* 暂时的 */
      left: calc(var(--x) - var(--g));
      top: calc(var(--y) - var(--g));
      transition: .3s;
      /* 添加一个锥形渐变 */
      /* background: conic-gradient( blue, red) */
      /* conic-gradient(at 中心点位置, bule 0-75%, red 75-100%) 留出空白 */
      /* background: conic-gradient(at 50px 50px, blue 75%, red 75%) */
      /* 背景重复，尺寸通过计算获得*/
      /* background: conic-gradient(at 50px 50px, blue 75%, red 75%) 0 0 / calc(100% - 50px) calc(100% - 50px); */
      /* background: conic-gradient(at 50px 50px, transparent 75%, red 75%) 0 0 / calc(100% - 50px) calc(100% - 50px); */
      /* background: conic-gradient(
        at var(--l) var(--l), 
      transparent 75%, red 75%
      ) 0 0 / calc(100% - var(--l)) calc(100% - var(--l)); */
      /* 通过蒙层去设置 */
      --mask: conic-gradient(
        at var(--l) var(--l), 
      transparent 75%, red 75%
      ) 0 0 / calc(100% - var(--l)) calc(100% - var(--l));
      mask: var(--mask);
      -webkit-mask: var(--mask);
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="pointer"></div>
    <div class="item"><img src="../轮播图/img/01.jpg" alt=""></div>
    <div class="item"><img src="../轮播图/img/02.jpg" alt=""></div>
    <div class="item"><img src="../轮播图/img/03.jpg" alt=""></div>
    <div class="item"><img src="../轮播图/img/04.jpg" alt=""></div>
    <div class="item"><img src="../轮播图/img/01.jpg" alt=""></div>
    <div class="item"><img src="../轮播图/img/02.jpg" alt=""></div>
    <div class="item"><img src="../轮播图/img/03.jpg" alt=""></div>
    <div class="item"><img src="../轮播图/img/04.jpg" alt=""></div>
    <div class="item"><img src="../轮播图/img/01.jpg" alt=""></div>
  </div>
  <hr>
  <section >
    <ol>
      <li>给容器 .container 和 选中框 .pointer 设置定位</li>
      <li>css 给.pointer 通过定义变量：--? 和计算属性，预设一个边框的所要显示默认状况</li>
      <li>通过js事件 获取鼠标移入时图片的信息，进行设值</li>
      <li>通过.pointer 的背景渐变设置，设置成四角边框的样子</li>
      <li>把背景变蒙层</li>
    </ol>
  </section>
  <script>
    const container = document.querySelector('.container')
    const imgs = document.querySelectorAll('.container img');
    const pointer = document.querySelector('.pointer');

    for(const img of imgs) {
      img.onmouseenter = e => {
        // 找到这个的框框，给他设值
        // offsetLeft, offsetTop 是根据它的第一个定位祖先的坐标来确定的
        // console.log({
        //   l: img.offsetLeft,
        //   t: img.offsetTop,
        //   w: img.offsetWidth,
        //   h: img.offsetHeight
        // })
        pointer.style.display = 'block'
        pointer.style.setProperty('--x', img.offsetLeft + 'px')
        pointer.style.setProperty('--y', img.offsetTop + 'px')
        pointer.style.setProperty('--s', img.offsetWidth + 'px')
        pointer.style.setProperty('--h', img.offsetHeight + 'px')
      }
    }

    container.onmouseleave = () => {
      pointer.style.display = 'none'
    }
  </script>
</body>
</html>